<template>
  <div class="option_fun">
    <div class="option_fun_left">
      <el-button type="primary" @click="router.go(-1)">
        <span class="iconify" data-icon="bx:arrow-to-left"></span>返回上一页
      </el-button>
    </div>
    <div class="option_fun_center">
      <el-space>
        <el-dropdown @command="exportImg">
          <el-button type="text">导出图片</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in imgTypeList"
                :key="item.type"
                :command="item.type"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown @command="exportData">
          <el-button type="text">导出数据</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in dataTypeList"
                :key="item.type"
                :command="item.type"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown @command="exportPage">
          <el-button type="text">导出Canvas页面</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in pageTypeList"
                :key="item.type"
                :command="item.type"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-space>
    </div>
    <div class="option_fun_right"></div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCanvasStore } from '@/store/modules/canvasStore'
import { guid } from '@/utils/index'
import {
  downloadCanvasIamge,
  downloadDataText,
  utf_8FileType,
  canvasFileType,
  downloadPage,
} from '@/modules/download'
const router = useRouter()
const canvasStore = useCanvasStore()
const canvasPage = computed(() => {
  return canvasStore.canvasPage
})
const imgTypeList = ref([
  {
    type: 'image/png',
    label: '导出为PNG',
  },
  {
    type: 'image/jpeg',
    label: '导出为JPG',
  },
  {
    type: 'image/webp',
    label: '导出为WEBP',
  },
])
const dataTypeList = ref([
  {
    type: 'data:text/html',
    label: '导出为HTML',
  },
  {
    type: 'data:application/json',
    label: '导出为JSON',
  },
  {
    type: 'data:text/plan',
    label: '导出为TXT',
  },
  {
    type: 'data:text/javascript',
    label: '导出为JS',
  },
])
const pageTypeList = ref([
  {
    type: 'data:text/html',
    label: '导出HTML页面',
  },
  {
    type: 'data:text/vue',
    label: '导出vue3页面',
  },
])
const exportImg = (type: canvasFileType) => {
  downloadCanvasIamge(guid(), type, canvasStore.canvas)
}

const exportData = (type: utf_8FileType) => {
  downloadDataText(guid(), type, JSON.stringify(canvasPage.value))
}
function exportPage(type: any) {
  downloadPage(guid(), type, canvasPage.value)
}
</script>
<style lang="scss" scoped>
.option_fun {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: -10px 0 10px 10px #c7c7c7;
  .option_fun_left {
    min-width: 300px;
    width: 300px;
  }
  .option_fun_center {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .option_fun_right {
    min-width: 300px;
    width: 300px;
  }
}
</style>
